<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <title>围棋-房间</title> -->
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="./javascripts/ajaxSet.js"></script>
</head>
<style>
  #rooms-list {
    display: flex;
  }
  .room-item {
    margin: 20px;
    background: green;
    width: 200px;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .room-item-name {
    display: flex;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: #efb5b5;
  }
  .room-user {
    cursor: pointer;
    display: flex;
    background: #fff;
    color: #000;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
  }
  .room-user.black {
    background: #000;
    color: #fff;
  }
</style>
<body>
  <h1>1111</h1>
  <!-- <h1>房间</h1> -->
  <ul id="rooms-list">
  </ul>
<script>
  $.ajax({
    url: '/room/getRoomList',
    method: 'get',
    success: function(res) {
      if (res.code == 2) {
        window.location.href = '/login.html';
      }
      var rooms = res.data;
      render(rooms);
    }
  });


  function render(rooms) {
    var html = '';
    for (var i = 0; i < rooms.length; i++) {
      var room = rooms[i];
      html += '<li class="room-item">\
                <div class="room-user black" onclick="goRoom('+ room.id +',\'H\')">\
                  '+ (room.colorHusername || "空") +'\
                </div>\
                <div class="room-item-name">' + room.roomname + '</div>\
                <div class="room-user" onclick="goRoom('+ room.id +',\'B\')">\
                  '+ (room.colorBusername || "空") +'\
                </div>\
              </li>';
    }
    $("#rooms-list").html(html);
  }

  function goRoom(roomid, type) {
    $.ajax({
      url: '/room/joinRoom',
      data: {
        roomid: roomid,
        type: type
      },
      success: function(res) {
        console.log(res);
        if (!res.data) {
          alert('不能加入');
        } else {
          window.location.href = '/weiqi.html?roomid=' + roomid + '&type=' + type;
        }
        // window.location.href = '/weiqi.html?roomid=' + roomid + '&type=' + type;
      }
    })
  }
</script>
</body>
</html>